<template>
  <div class="product-outlist-container">
    <!-- 搜索表单 -->
    <el-form :inline="true">
      <el-form-item>
        <el-input
          v-model="product_out_id"
          @change="searchProductForOutId"
          placeholder="输入出库编号进行搜索"
          :prefix-icon="Search"
          :clearable="true"
        ></el-input>
      </el-form-item>
    </el-form>
    <!-- 主体表格 -->
    <div class="table">
      <el-table :border="true" :data="outProductList">
        <el-table-column type="index" width="55"></el-table-column>
        <el-table-column
          label="出库编号"
          align="center"
          type="default"
          prop="product_out_id"
          min-width="120"
        />
        <el-table-column
          min-width="120"
          label="申请数量"
          align="center"
          type="default"
          prop="product_out_number"
        />
        <el-table-column
          label="申请出库总价"
          align="center"
          type="default"
          prop="product_out_price"
          min-width="130"
        />
        <el-table-column
          label="出库申请人"
          align="center"
          type="default"
          prop="product_out_apply_person"
          min-width="140"
        />
        <el-table-column
          label="申请出库时间"
          align="center"
          type="default"
          prop="product_audit_time"
          min-width="200"
        >
          <template v-slot="{ row }">
            {{ formaDate(row.product_audit_time) }}
          </template></el-table-column
        >
        <el-table-column
          label="审核人"
          align="center"
          type="default"
          prop="product_out_audit_person"
          min-width="140"
        />
        <el-table-column
          label="审核时间"
          align="center"
          type="default"
          prop="product_audit_time"
          min-width="200"
          ><template v-slot="{ row }">
            {{ formaDate(row.product_audit_time) }}
          </template></el-table-column
        >
        <el-table-column
          label="审核备注"
          align="center"
          type="default"
          prop="audit_memo"
          min-width="240"
        />
      </el-table>
      <!-- 分页器 -->
      <div class="pagination">
        <el-pagination
          class="pagination"
          v-model:current-page="page"
          :page-size="10"
          layout="prev, pager, next, jumper,total"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAuditProductListAPI, searchProductForOutIdAPI } from '@/api/product'
import { Search } from '@element-plus/icons-vue'
import moment from 'moment'
import { onMounted, ref } from 'vue'

// 分页器数据
const page = ref<number>(1)
const total = ref<number>(0)
// 处理日期
const formaDate = (date: string) => {
  return moment(date).format('YYYY-MM-DD HH:mm:ss')
}
/** 产品出库编号 */
const product_out_id = ref<number>()
/** 产品列表 */
const outProductList = ref<AuditList[]>([])
/** 获取产品列表 */
const getProductList = async () => {
  const res = await getAuditProductListAPI(page.value)
  total.value = res.total!
  outProductList.value = res.data!
}
/** 搜索 */
const searchProductForOutId = async () => {
  if (product_out_id.value) {
    const res = await searchProductForOutIdAPI(product_out_id.value!)
    outProductList.value = res.data
    total.value = outProductList.value.length
  } else {
    getProductList()
  }
}

onMounted(() => {
  getProductList()
})
</script>

<style scoped lang="scss">
.product-outlist-container {
  padding: 8px;
  .el-form {
    display: flex;
    justify-content: space-between;
    .el-form-item {
      margin: 0;
    }
  }
  .el-table {
    margin-top: 10px;
  }
  .pagination {
    display: flex;
    justify-content: center;
    margin: 15px;
  }
}
</style>
